<template>
  <div class="app-main">
    <div class="compTitle">数据分析</div>
<el-form
    ref="ruleFormRef"

    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    label-position="top"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >

    <el-form-item label="Select platform" prop="count">
      <el-select-v2
        v-model="ruleForm.count"
        placeholder="Activity count"
        :options="options"
      />
    </el-form-item>

  </el-form>
  <div class="chartContainer">
      <el-card style="height: 400px">
        <template #header>Vertical Bar Chart</template>
        <div ref="verticalChart" style="width: 100%; height: 310px"></div>
      </el-card>
      <el-card style="height: 400px">
        <template #header>Horizontal Bar Chart</template>
        <div ref="horizontalChart" style="width: 100%; height: 310px"></div>
      </el-card>
  </div>
  
  </div>
  
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'DataAnalyse',
  data() {
    return {
      formSize: 'default',
      ruleFormRef : null,
      ruleForm: {
        name: 'Hello',
        region: '',
        count: '',
        date1: '',
        date2: '',
        delivery: false,
        location: '',
        type: [],
        resource: '',
        desc: '',
        webhookUrl: '',
        webhookSecret: '',
        wechatToken: '',
      },
      locationOptions: ['Home', 'Company', 'School'],
      rules: {
        name: [
          { required: true, message: 'Please input Activity name', trigger: 'blur' },
          { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        ],
        region: [
          {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change',
          },
        ],
        count: [
          {
            required: true,
            message: 'Please select Activity count',
            trigger: 'change',
          },
        ],
        
        
        desc: [
          { required: true, message: 'Please input activity form', trigger: 'blur' },
        ],
        webhookUrl: [
          { required: true, message: 'Please input webhookUrl', trigger: 'blur' },
        ],
        wechatToken: [
          { required: true, message: 'Please input Wechat token', trigger: 'blur' },
        ],
      },
      options: Array.from({ length: 10000 }).map((_, idx) => ({
        value: `${idx + 1}`,
        label: `${idx + 1}`,
      }))
    }
  },
  mounted() {
    //this.ruleFormRef = this.$refs.ruleFormRef;
    this.initCharts();
  },
  methods: {
    async submitForm(formEl) {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
        if (valid) {
          console.log('submit!')
        } else {
          console.log('error submit!', fields)
        }
      })
    },
    resetForm(formEl) {
      if (!formEl) return
      formEl.resetFields()
    },
    initCharts() {
      // Initialize vertical bar chart
      const verticalChart = echarts.init(this.$refs.verticalChart);
      const verticalOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            axisLine: { show: false },
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
          }
        ],
        series: [
          {
            name: 'Count',
            type: 'bar',
            barWidth: '40%',
            data: [10, 52, 200, 334, 390, 330, 220],
            label: {
            show: true,
            position: 'top',
            valueAnimation: true
          }
          }
        ]
      };
      verticalChart.setOption(verticalOption);

      // Initialize horizontal bar chart
      const horizontalChart = echarts.init(this.$refs.horizontalChart);
      const horizontalOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          splitLine: { show: false },
          axisLabel: { show: false },
        },
        yAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', ],
          axisLine: { show: false },
            axisLabel: { show: true },
            axisTick: { show: false },
            splitLine: { show: false },
        },
        series: [
          {
            name: 'Count',
            type: 'bar',
            barWidth: '40%',
            data: [10, 52, 200, ],
            label: {
            show: true,
            position: 'right',
            valueAnimation: true
          }
          }
        ]
      };
      horizontalChart.setOption(horizontalOption);
    },
  }
}
</script>

<style scoped>
.upload-demo{width: 100%;}
.compTitle{margin:0 auto;width: 90%;font-family: Inter, Inter;
font-weight: bold;
font-size: 32px;
color: #0F141A;
line-height: 40px;
text-align: left;
font-style: normal;
text-transform: none;}
.demo-ruleForm{margin:0 auto;width: 90%;}
.chartContainer{width: 90%;margin: 0 auto;}
.el-card{margin-bottom: 20px;}
</style>